$(document).ready(function () {
    $.ajax({
        type: "GET",
        url: "../php/orderinfo.php",
        dataType: "json",
        success: function (response) {
            response.reverse();


            //点击左右按钮now中的页数+1或者-1
            //当now中页数为1的时候不能左点击,页数为all时不能右点击
            //点击右箭头
            //  1.now中数+1  2.tbody中数据从对应条重新渲染(左箭头相反)
            //输入input中的页数,如果合法,点击跳转会跳转到对应页面
            //  1.now中数改为对应页面 2.tbody数据对应渲染
            pageList(response);
        }
    })
});

function pageList(data) {
    //总条数
    let len = data.length;
    //总页数
    let allPage = parseInt(len / 10) + 1;
    fromXtoY(data, 0, 10);

    document.getElementsByClassName("all")[0].innerText = allPage;

    document.getElementsByClassName("direction right")[0].addEventListener("click", function () {
        let nowp = parseInt(document.getElementsByClassName("now")[0].innerText);
        if (nowp < allPage) {
            fromXtoY(data, nowp * 10, 10);
        }
        document.getElementsByClassName("now")[0].innerHTML = `${nowp + 1}`;
    })
    document.getElementsByClassName("direction left")[0].addEventListener("click", function () {
        let nowp = parseInt(document.getElementsByClassName("now")[0].innerText);
        if (nowp > 1) {
            fromXtoY(data, (nowp - 2) * 10, 10);
        }
        document.getElementsByClassName("now")[0].innerHTML = `${nowp - 1}`;
    })

    document.getElementsByClassName("jump")[0].addEventListener("click", function () {
        let page = parseInt(document.getElementsByClassName("jump-input")[0].value);
        if (page !== NaN && page >= 1 && page <= allPage) {
            fromXtoY(data, (page - 1) * 10, 10);
        }
        document.getElementsByClassName("now")[0].innerHTML = `${page}`;
        document.getElementsByClassName("jump-input")[0].value="";
    })
}
//从第x条渲染y条
function fromXtoY(data, x, y) {
    let table = document.getElementById("orderListTable").getElementsByTagName("tbody")[0];

    table.innerHTML = `<tr>
    <th>商品名称</th>
    <th>订单样式</th>
    <th>价格</th>
    <th>商品ID</th>
    <th>购买人</th>
    <th>手机</th>
    <th>邮箱</th>
    <th>地区</th>
    <th>地址</th>
    <th>备注</th>
    <th>下单时间</th>
    </tr>`;


    for (let i = x; i < (x + y); i++) {
        if (i < data.length) {
            let element = data[i];
            let tr = document.createElement("tr");
            tr.innerHTML = `
        <td>${element.goodsname.substr(0,15)}...</td>
        <td>${element.style}</td>
        <td>${element.price}</td>
        <td>${element.goodsid}</td>
        <td>${element.name}</td>
        <td>${element.mobile}</td>
        <td>${element.mail}</td>
        <td>${element.region}</td>
        <td>${element.address}</td>
        <td>${element.remark}</td>
        <td>${element.generationTime}</td>`;
            table.appendChild(tr);
        } else {
            break;
        }
    }

}